.article-pagination {
	padding: 20px;
	background: var(--jj-article-pagination-bg);
	border-top: 1px solid var(--jj-article-pagination-border);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	margin-bottom: 20px;
	&.hidden {
		display: none;
	}
	&.no-more {
		.article-pagination-content > a {
			display: none;
		}
		.article-pagination-loading {
			display: none;
		}
		.article-pagination-no-more {
			display: inline;
		}
	}
}
.article-pagination-content {
	text-align: center;
	> a {
		display: none;
	}
}
.article-pagination-loading {
	height: 20px;
	vertical-align: top;
}
.article-pagination-no-more {
	display: none;
	font-size: 14px;
	color: var(--jj-article-pagination-no-more-color);
}

// 按钮分页
.pagination-button {
	padding: 20px;
	background: var(--jj-article-pagination-bg);
	border-top: 1px solid var(--jj-article-pagination-border);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	margin-bottom: 20px;
	display: flex;
	justify-content: center;
	&.hidden {
		display: none;
	}
	> li {
		flex-shrink: 0;
		& + li {
			margin-left: 8px;
		}
	}
	a,
	span {
		display: block;
		width: 32px;
		height: 32px;
		line-height: 32px;
		text-align: center;
		background-color: var(--jj-pagination-button-item-bg);
		border-radius: 6px;
		text-decoration: none;
		font-size: 12px;
		color: var(--jj-pagination-button-item-color);
	}
	.prev a,
	.next a {
		width: auto;
		padding: 0 10px;
		white-space: nowrap;
	}
	a {
		transition: all 0.2s;
		&:active {
			opacity: 0.7;
		}
	}
	> li.active a,
	a:hover {
		background-color: var(--jj-pagination-button-item-bg-hover);
		color: var(--jj-pagination-button-item-color-hover);
	}
}
.pagination-button-no-more {
	padding: 20px;
	background: var(--jj-article-pagination-bg);
	border-top: 1px solid var(--jj-article-pagination-border);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	margin-bottom: 20px;
	font-size: 14px;
	color: var(--jj-article-pagination-no-more-color);
	text-align: center;
	&.hidden {
		display: none;
	}
}

@media screen and (max-width: 640px) {
	.article-pagination,
	.pagination-button,
	.pagination-button-no-more {
		border: none;
		margin-top: 10px;
	}
	.pagination-button {
		padding: 20px 12px;
	}
}
@media screen and (max-width: 420px) {
	.article-pagination,
	.pagination-button,
	.pagination-button-no-more {
		margin-top: 8px;
	}
	.pagination-button {
		> li + li {
			margin-left: 6px;
		}
		a,
		span {
			width: 28px;
			height: 28px;
			line-height: 28px;
		}
		.prev a,
		.next a {
			padding: 0 6px;
		}
	}
}
